<template>
    <div class="index">
        <div class="content">
            <div class="timer">
                <div class="spnav">
                  <div @click="goto('/my/index')">每日素材</div>
                  <div @click="goto('/my/risk')">树脂消耗</div>
                  <div @click="goto('/my/time')">时间提醒</div>
                  <div @click="goto('/my/ck')">Cookie设置</div>
                </div>
                <div>{{nowTime}}</div>
            </div>
            <router-view/>
        </div>
    </div>
</template>
<script>
  import CookieOf from './mod/CookieOf.vue'
  import DailyOf from './mod/DailyOf.vue'
  import TimeOf from './mod/TimeOf.vue'
  import RiskOf from "./mod/RiskOf";

  import { goto } from '../util/request'
  import { getWeek, dateFormat } from '../util/daelTime'

  export default {
    name: "index",
    components: {
      CookieOf,
      DailyOf,
      TimeOf,
      RiskOf
    },
    data() {
      return {
        select: 0,
        nowTime: '',
      }
    },
    methods: {
        init() {
          document.querySelector('.vc-switch').innerHTML = 'VC3.9'
          const fmt = 'YYYY-MM-DD hh:mm:ss 星期ZHWK'
          setInterval(()=> {
            const nw = new Date()
            this.nowTime = dateFormat(nw, fmt)
          }, 1000)
        },
        goto
    },
    created() {
      this.init()
    }
  }
</script>

<style lang="less" scoped>
    .index {
        .timer {
          .spnav {
            display: flex;
            justify-content: space-between;
            div {
              width: 100%;
              cursor: pointer;
            }
          }
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(255, 255, 255, 0.7);
        }
        text-align: center;
        padding: 1rem;
        height: calc(100% - 2rem);
        display: flex;
        justify-content: center;
        .content {
            padding-top: 2rem;
            max-width: 1000px;
        }
    }
</style>
<style lang="less">
    .el-message-box__wrapper {
        top: 30%;
        .el-message-box {
            width: 100%;
        }
    }
</style>
